<template>
    <div class="wrap">
           <div class="top"> K Record </div> 
                <van-form class="vansForm" > 
              <br> <br> <br>
            <van-cell-group title="">
                <van-field
                    v-model="username"
                    name="name"                   
                    placeholder="玩家名"
                    right-icon="warning-o"
                    :rules="[{ required: true, message: '填写姓名' }]">
                    <template  v-slot:label><span class="titleSlot"> 玩家 </span></template>
                </van-field>
                <van-field
                    v-model="user_score"
                    name="user_score"
                    type="digit"
                    label="分数"
                    placeholder="玩家分数"
                    :rules="[{ required: true, message: '填写玩家分数' }]">
                      <template  v-slot:label><span class="titleSlot"> 分数 </span></template>
                </van-field>
                <van-field
                    v-model="song"
                    is-link
                    readonly
                    name="picker"
                    label="选择器"
                    placeholder="点击选择歌名"
                    @click="showPicker = true"
                    >
                     <template  v-slot:label><span class="titleSlot"> 歌曲名 </span></template>
                </van-field>
                <van-popup v-model:show="showPicker" position="bottom">
                    <van-picker
                        :columns="columns"
                        @confirm="onConfirm"
                        @cancel="showPicker = false"
                    />
                </van-popup>
                <van-field
                    v-model="extra_info"
                    name="extra_info"
                    type="digit"
                    label="备注"
                    placeholder="备注"
                    :rules="[{ required: true, message: '填写玩家分数' }]">
                      <template  v-slot:label><span class="titleSlot"> 备注 </span></template>
                </van-field>
                <!-- <van-field
                    v-model="department"
                    name="type"
                    label="办理业务"
                    placeholder="办理业务"
                    :rules="[{ required: true, message: '请填写办理业务' }]"
                /> -->
            </van-cell-group> 
                <!-- <van-field
                    v-model="end_date_result"
                    is-link
                    readonly
                    name="end_date_result"
                    label="办理时间"
                    placeholder="办理时间"
                    @click="showEndCalendar = true"
                    />
                <van-calendar v-model:show="showEndCalendar" @confirm="onEndConfirm" :show-confirm="false" /> -->
            <div style="margin: 24px;margin-bottom: -15px;">
                <van-button  @click="onSubmit"  round block type="warning" >
                    提交
                </van-button>
                <br>
            </div>
        </van-form> <br> <br>

        <van-button type="info" @click="toRanking" > 排行榜 </van-button>

        <video id="player" controls autoplay ref="player"></video>
        <button id="capture" @click="makeCapture" ref="capture">Capture</button>
        <canvas id="snapshot" width=320 height=240 ref="snapshot" ></canvas>

    </div>



</template>

<script >
import { ref, onMounted, getCurrentInstance, inject } from 'vue';
import {useRouter, useRoute} from 'vue-router'
import moment from 'moment'
import { Dialog } from 'vant'


 export default { 
    setup(){
        let router = useRouter();
        let route = useRoute()
        const activeId = ref(1);
        const activeIndex = ref(0);
        const username = ref('');
        const password = ref('');
        const department = ref('')
        const user_score = ref('')
        const telphone = ref('')
        const song = ref('')
        const extra_info = ref('')
        const player = ref(null)
        const capture = ref(null)
        const snapshot = ref(null)
        // 调用摄像头
        const makeCapture = ()=>{
            console.log('调用视频组件')
            let context = snapshot.value.getContext('2d')
            context.drawImage(player.value, 0, 0, snapshot.value.width, 
                snapshot.value.height)
            }

        const onitemclick = (data)=>{
                    console.log(data)
                    router.push({
                        name: 'complexDetail',
                        query: { name: data.text, mainIndex: activeIndex.value  }
                    })
                }
        // 调用摄像头回调
        const handleSuccess = (stream)=>{
            console.log('视频回调')
            player.value.srcObject = snapshot

        }
        const onSubmit = (values) => {
                        let mmday = moment().format('YYYYMMDD');
                        let stamp =  moment(new Date()).valueOf();
                        console.log('SusssbmitKK', mmday, stamp);
                        if(username.value&&song.value&&user_score.value){
                            Dialog.confirm({
                                title: '提示',
                                message:
                                    `确认录入 \n 玩家 - ${ username.value } \n 分数 - ${song.value} | ${ user_score.value }  ？`,
                            })
                            .then(() => {
                                    console.log('ggggggg', cloud)
                                    const db = cloud.database();  
                                    let new_data = { record: true, time: mmday, time_stamp: stamp, player: username.value,
                                        score: parseInt( user_score.value ) , song: song.value, extra_info: extra_info.value
                                    } // 加入一个确定属性，有这个属性的作为有效数据
                                    // values = Object.assign(values, status)
                                    let dbdata =  db.collection("ksong").add(new_data).then(
                                        (res)=>{  
                                            console.log("X录入唱歌成功", res, new_data);
                                            confirm(`录入 ${username.value}-${song.value} 完成`)
                                            } )                          })
                            .catch(() => {
                                console.log('取消')
                            });   
                        }  else{
                            alert('填写未')
                        }                                                            
                    };

        const toRanking = ()=>{
            console.log(111111111111)
            router.push({
                name: 'singRank'
            })
        }

        const showPicker = ref(false);
        const columns = ['孤勇者', '她说', '简单爱', '稻香', '非酋'];

        const onConfirm = (value) => {
                song.value = value;
                showPicker.value = false;
            };

        onMounted(async()=>{
                        console.log('index K歌 test')       
                        navigator.mediaDevices.getUserMedia({video: true})
                            .then(handleSuccess());   
                    })
                const cloud = inject('$cloud')
                return {
                        router,
                        route ,
                        activeId ,
                        activeIndex ,
                        username ,
                        password,  
                        department, 
                        user_score ,
                        telphone ,
                        // items ,
                        onSubmit,
                        toRanking,
                        song,
                        columns,
                        onConfirm,
                        showPicker,
                        makeCapture,
                        handleSuccess,
                        snapshot,
                        player,
                        capture
                }
            }
  }




</script>

<style lang="scss">
    body {
        margin: 0;  /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
    }
    .top{
        margin: 7px auto;
        margin-bottom: 16px;
        width: 100%;
        background: lightcyan;
        padding-bottom: 5px;
        padding-top: 5px;
        font-weight: bold;
        font-size: 17px;
    }
    .tree{
        height: 500px !important;
    }
    .titleSlot{
        color: white ;
        font-weight: bold;
        background-color: darkgoldenrod;
        padding: 5px;
        width: 20px;
        font-size: 20px;
    }
</style>